<template>
  <div ref="chartRef" class="bar-chart" style="width: 100%; height: 100%"></div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import * as echarts from "echarts";

defineOptions({
  name: "BarChart",
});

const chartRef = ref<HTMLDivElement | null>(null);

onMounted(() => {
  if (chartRef.value) {
    const chart = echarts.init(chartRef.value);
    chart.setOption({
      title: { text: "示例柱状图", textStyle: { color: "#fff" } },
      tooltip: {},
      xAxis: {
        data: ["A", "B", "C", "D", "E"],
        axisLabel: { color: "#fff" },
      },
      yAxis: {
        axisLabel: { color: "#fff" },
      },
      series: [
        {
          name: "销量",
          type: "bar",
          data: [5, 20, 36, 10, 10],
          itemStyle: { color: "#40a9ff" },
        },
      ],
    });
    window.addEventListener("resize", () => chart.resize());
  }
});
</script>

<style lang="scss" scoped>
.bar-chart {
  width: 100%;
  height: 100%;
}
</style>
